<template>
  <div class="list-card">
    <van-row gutter="20">
      <van-col :span="12" class="name">{{ title }} </van-col>
      <van-col :span="12" class="date">{{ date }}</van-col>
      <van-col :span="12">
        <van-row class="content">
          <van-col :span="24">
            <p>{{ids}}</p>
          </van-col>
          <van-col :span="24">
            <p>件数 : 12件</p>
          </van-col>
          <van-col :span="24">
            <p>备注 : 定金100元</p>
          </van-col>
        </van-row>
      </van-col>
      <van-col :span="12" class="img">
        <img :src="[stateValue == 0 ? padding : success]" />
      </van-col>
      <van-col v-if="stateValue == 0" :span="12">
        <van-button type="primary" size="small" @click="changeState()">
          完成
        </van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script setup>
import padding from "../assets/padding.svg";
import success from "../assets/success.svg";
import { ref } from "vue";
import { changeStatus } from "../api/order";
import { showSuccessToast, showFailToast } from 'vant';
const props = defineProps({
  title: String,
  date: String,
  state: Number,
  ids: Object,
});
const arrayIds = props.ids;
const statusIds = ref([]);
const stateValue=ref(props.state)
arrayIds.forEach(function (value, index, array) {
  statusIds.value.push(value.id);
});
const changeState = () => {
  changeStatus(statusIds.value).then(res=>{
    showSuccessToast('配送完成')
    stateValue.value = '1';
  }).catch(res=>{
    showFailToast('配送失败')
  });
};
</script>

<style lang="less" scoped>
.list-card {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  padding: 15px;
  border-radius: 15px;
  margin-top: 10px;
}
.van-row {
  .name {
    font-size: 20px;
  }
  .date {
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: silver;
  }
  .img {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 50%;
    }
  }
}
.content {
  margin-top: 5px;
  font-size: 12px !important;
  p {
    margin: 5px;
  }
}
</style>